import React, { PureComponent } from 'react';
// 引入样式
import './scss/spider.scss';
// 引入样式
import { Input, Button, message, Modal } from 'antd';
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website'
export default class Spider extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 输入框
      input: '',
      // 图片列表
      imgAll: '',
      // 下标
      int: 1,
      // 是否显示下一页
      isInt: false,
      // 控制对话框的显示隐藏
      visible: false,
      // 可下载资源
      urlList: []
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
    // 内容变更时清空下标
    this.setState({
      int: 1
    })
  }
  // 查询
  spiderBtn = () => {
    let { input, int } = this.state;
    // 判断输入框是否为空
    if (!input) {
      message.info({ content: '请输入一个图片名', className: 'bulletChatMessage' });
      return;
    }
    setTimeout(message.loading('图片加载中.....', 0), 1000);
    // 发送请求  word = 要搜索的内容  int = 页数
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/spider", { word: input, int: int }).then(err => {
      if (err.data.code === 'S0001') {
        // 搜索内容为空时，提示
        if (err.data.imgAll.length === 0) {
          message.info({ content: '您搜索的关键字没有内容', className: 'bulletChatMessage' });
          this.setState({
            // 关闭底部标签
            isInt: false,
            // 清空图片列表
            imgAll: []
          })
          return;
        } else {
          // 有返回数据
          this.setState({
            // 返回数据赋值到页面
            imgAll: err.data.imgAll,
            // 开启底部标签
            isInt: true
          })
        }
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }
  // 上一曲
  goLeft = () => {
    let { int } = this.state;
    // 当页数为1时提示
    if (int === 1) {
      message.info({ content: '前面没有了', className: 'bulletChatMessage' });
    } else if (int > 1) {
      // 页数大于 1 就页数 - 1
      this.setState({
        int: int - 1,
        imgAll: []
      }, () => {
        // 重新获取一次数据
        this.spiderBtn()
      })
    }
  }
  // 下一页
  goRight = () => {
    let { int, imgAll } = this.state;
    // 图片数量大于 50 就证明有下一页
    if (imgAll.length === 50) {
      this.setState({
        int: int + 1,
        imgAll: []
      }, () => {
        // 重新获取一次
        this.spiderBtn()
      })
    } else {
      // 没有就提示用户是最后一页
      message.info({ content: '后面没有了', className: 'bulletChatMessage' });
    }
  }

  showModal = (url) => {
    this.setState({
      visible: true,
      urlList: []
    })
    // 请求发送到后台获取可以下载的图片源
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/spiderGetUrl", { url: url }).then(err => {
      if (err.data.code === 'U0001') {
        this.setState({
          urlList: err.data.urlList
        });
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  // 下载图片
  ClickUrl = (url) => {
    let date = Date.now();
    var a = document.createElement("a");
    a.download = `${date}.png`;　　//下载的文件名，默认是'下载'
    a.href = url;
    a.target = '_blank';
    document.body.appendChild(a); a.click(); a.remove();　　//下载之后把创建的元素删除
  }
  render () {
    let { input, imgAll, isInt, urlList } = this.state;
    return (
      <div className='spider'>
        <div className='spider_title'>
          <Input placeholder="输入要寻找的图片名称" className='spider_input' value={input} name='input' onChange={this.handleInput} autoComplete="off" maxLength='20' onPressEnter={this.spiderBtn} />
          <Button onClick={this.spiderBtn} type='text'>查询</Button>
        </div>
        <Modal
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
          getContainer={document.getElementsByClassName('spider')[0]}
          bodyStyle={{
            width: '60vw',
            height: '120vw'
          }}
        >
          <ul className='spider_modal'>
            {
              urlList.length !== 0 ?
                urlList.map((list, index) => {
                  return (
                    <li className='spider_modal_li' key={list.index}>
                      <div className='spider_modal_li_title'>
                        <img src={list.imgUrl} alt="可下载的图片" width={list.spanPx} />
                      </div>
                      <div className='spider_modal_li_div'>
                        <p>{list.spanPx}</p>
                        <img src={require('./image/xiazai.png')} alt="下载" onClick={() => this.ClickUrl(list.imgUrl)} />
                      </div>
                    </li>
                  )
                })
                : ''
            }
          </ul>
        </Modal>
        <ul className='spider_ul'>
          {
            imgAll.length !== 0 ?
              imgAll.map((list, index) => {
                return (
                  <li className='spider_ul_li' key={list.index}>
                    <img src={list.img} alt="图片" onClick={() => this.showModal(list.imgUrl)} />
                  </li>
                )
              })
              : ''
          }
        </ul>
        {/* 下一页 */}
        {
          isInt ? <div className='spider_botton'>
            <img src={require('./image/zuo.png')} alt="上一页" className='spider_botton_left' onClick={this.goLeft} />
            <img src={require('./image/you.png')} alt="下一页" className='spider_botton_right' onClick={this.goRight} />
          </div> : ''
        }
      </div>
    )
  }
}